<template>
    <div class="attribute-container">
        <nut-navbar v-if="TARO_ENV === 'h5'" title="货物属性设置" left-show @click-back="Taro.navigateBack()"></nut-navbar>
        <div class="content">
            <div class="list">
                <!-- <template v-for="item in state.list" :key="item.groupId">
                    <nut-cell :title="item.groupName" />
                    <nut-cell v-for="child in item.children" :key="child.attrId" :title="child.attrName" is-link />
                </template> -->
                <nut-cell-group v-for="item in state.list" :key="item.groupId">
                    <nut-swipe>
                        <nut-cell :title="item.groupName" />
                        <template #right>
                            <nut-button shape="square" style="height: 100%" type="info">新增属性</nut-button>
                            <nut-button shape="square" style="height: 100%" type="warning" @click="edit(item)">编辑</nut-button>
                            <nut-button shape="square" style="height: 100%" type="danger" @click="deleteGroup(item)">删除</nut-button>
                        </template>
                    </nut-swipe>
                    <nut-cell v-for="child in item.children" :key="child.attrId" :title="child.attrName" is-link />
                </nut-cell-group>
            </div>
            <nut-button size="large" type="info" @click="edit">新增分组</nut-button>
        </div>
        <EditGroup ref="editGroupRef" v-model:visible="state.groupVisible" @refresh="getList" />
        <EditAttr v-model:visible="state.attrVisible" />
        <Notify ref="notifyRef" />
    </div>
</template>

<script lang="ts">
export default { name: 'Attribute' }
</script>

<script lang="ts" setup>
import { reactive, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'
import Taro from '@tarojs/taro'
import { Plus, Edit } from '@nutui/icons-vue-taro'
import Notify from '@/components/system/Notify.vue'
import EditGroup from './EditGroup.vue'
import EditAttr from './EditAttr.vue'
import { $http } from '@/request'

const TARO_ENV = process.env.TARO_ENV

const notifyRef = ref<InstanceType<typeof Notify>>()

type ListItem = {
    groupName: string,
    groupId: number,
    children: {
        attrName: string
        attrId: number
    }[]
}
const state = reactive({
    groupVisible: false,
    attrVisible: false,
    list: [] as ListItem[]
})

const getList = () => {
    $http.getAttrList().then(r => {
        state.list = r.data.data
    }).catch(e => { })
}
getList()

const editGroupRef = ref()
const edit = ({ groupId, groupName }: ListItem) => {
    state.groupVisible = true
    editGroupRef.value.setCurrent(groupId, groupName)
}

const deleteGroup = (group: ListItem) => {
    $http.deleteGroup(group).then(() => {
        notifyRef.value?.$success('删除成功')
        getList()
    }).catch(e => {
        notifyRef.value?.$error(e.data?.message ?? '删除失败')
    })
}

</script>
<style lang="scss" scoped>
.attribute-container {
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        .list {
            flex: 1;
        }
    }
}
</style>